<!-- 门店列表 -->
<div class="layuimini-container">
	
	<!-- 条件搜索-->
	<div class="layuimini-main" style="padding:4px;">
		<form class="layui-form layui-form-pane" action="">
			<!-- 总店查询 -->
			<div class="layui-input-inline">
				<input type="text" id="a" name="storeName" placeholder="请输入总店名" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline">
				<input type="text" id="b" name="storeCode" placeholder="请输入总店编码" autocomplete="off" class="layui-input">
			</div>
			<!-- 搜索按钮 -->
			<div class="layui-inline">
				<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i>查询</button>
				<button type="submit" id="reset" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-reset-btn"><i class="layui-icon"></i>重置</button>
			</div>
		</form>
	</div>
	
	<!-- 数据表格 -->
	<div class="layuimini-main" style="padding:0 4px;">
		<!-- 表格：数据表格 -->
		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
	</div>
	
	<!-- 定义 id="currentTableBar" -->
	<script type="text/html" id="currentTableBar">
		<!-- <a class="layui-btn layui-btn-xs" lay-event="detail"> 查看分店 </a> -->
		<a class="layui-btn layui-btn-xs" lay-event="detail" href="#/page/sub_store_list.html">查看分店</a>
	</script>
		
</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;

		//渲染form表单
		form.render();

		//省市区
		layarea.render({
			elem: '#area-picker',
			//三级选择框每次选择时执行
			change: function(res) {
				//选择结果
				console.log(res);
			}
		});

		//对table进行初始化
		table.render({
			elem: '#currentTableId', //指定初始化的tableID
			url: 'http://localhost:8001/sccDrugstore/', //请求地址,获取数据，后期将调用controller的接口，获得json数据
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [
				[ //字段，表头
					{field: 'storeId', type: "checkbox", width: 50},
					{type: 'numbers',title: '序号', align:"center"},
					{field: 'storeName',title: '总店名称'},
					{field: 'storeCode',title: '总店编号', align:"center"},
					{field: 'name',title: '联系人', align:"center"},
					{field: 'phone',title: '联系电话', align:"center"},
					{title: '操作',minWidth: 200,
						toolbar: '#currentTableBar',
						align: "center"
					} //toolbar: '#currentTableBar'表示调用上面定义的编辑和删除按钮
				]
			],
			page: true, //是否显示分页插件
			limits: [5, 10, 20, 30], //定义每页显示多少条记录
			limit: 5, //默认每页 显示15条
			skin: 'line'
		});
		// 监听搜索操作
		form.on('submit(data-search-btn)', function(data) { //当点击搜索按钮时，执行function()函数，data是指form表单中的所有数据
			console.log(data);
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			// layer.alert(result, { //弹出层，显示result（转换后的json字符串）
			// 	title: '最终的搜索信息' //弹出层的标题
			// });
			//执行搜索重载
			table.reload('currentTableId', {
			    page: {
			        curr: 1	//当前行是第一行
			    }
			    , where: {	//条件
			        data: result	//搜索条件
			    }
			}, 'data');

			return false;
		});
		// 监听重置操作
		form.on('submit(data-reset-btn)', function(data) {
			$("#a").val("");
			$("#b").val("");
			var test =data.field;
			delete test.storeName;
			delete test.storeCode;
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			// layer.alert(result, { //弹出层，显示result（转换后的json字符串）
			// 	title: '最终的搜索信息' //弹出层的标题
			// });
			// 执行搜索重载
			table.reload('currentTableId', {
			    page: {
			        curr: 1	//当前行是第一行
			    }
			    , where: {	//条件
			        data: result	//搜索条件
			    }
			}, 'data');
		
			return false;
		});
		//监听表格复选框选择
		table.on('checkbox(currentTableFilter)', function(obj) {
			console.log(obj)
		});
		//监 听操作列下面的编辑和删除
		table.on('tool(currentTableFilter)', function(obj) {
			//获得当前行数据
			var data = obj.data;
			 if (obj.event === 'detail') { //查看分店
				localStorage.setItem('parentCode',data.storeCode);
				return false;
			}
		});

	});
</script>
